<template>
    <div class="doctors">
        <div class="card-head">
            <h2><span class="iconfont icon-back" @click="goback()"></span>{{category.title}}</h2>
            <div class="placeholder-mide"></div>
            <!--<div class="page-turn">
                <span class="iconfont icon-turnpage"></span>
                <span class="iconfont icon-left" @click="pageJump(-1)" :class="{disabled:cannotBackward}"></span>
                <span class="current-pagenum">{{page_data.paging.current_page}}</span>
                <span class="iconfont icon-right" @click="pageJump(1)" :class="{disabled:cannotForword}"></span>
            </div>-->
        </div>

        <div class="card-list">
            <div class="card" v-if="loading">
                <div class="card-info"> 加载中…… </div>
            </div>
            <div class="card" v-if="!loading&&!page_data.data.length">
                <div class="card-info"> 暂无数据 </div>
            </div>
            <router-link class="card" v-for="article in page_data.data" :to="'/doctor-detail/'+article.id">
                <div class="card-image" :style="{backgroundImage:`url(${article.thumb_full})`}">
                    <img v-if="article.thumb_full" :src="article.thumb_full" alt="">
                    <div class="img-mask"></div>
                    <h4>{{article.title}}</h4>
                    <div class="card-content">
                        <h6>{{article.description}}</h6>
                        <p v-if="article.technology">主要技术：{{article.technology}}</p>
                        <p v-if="article.details">工作内容：{{article.details}}</p>
                        <div class="rate-start" :style="{
                            width:article.testimonial*3+'px',
                            backgroundImage:`url('${api_base_url}images/stars.png')`
                        }"></div>
                    </div>
                </div>
            </router-link>
            <div class="card" @click="pageJump(1)" v-if="!cannotForword">
                <div class="card-more">
                    更多<span class="iconfont icon-right"></span>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    import NavBar from './Nav-Bar';
    import { router } from '../routes';
    import config, { fetchRest } from '../config';

    export default {
        name: "doctors",
        components: { NavBar },
        data() {
            this.fetchData();

            var res = {
                api_base_url: config.api_base_url,
                category: {},
                some_model_categorys: [],
                page_data: {
                    data: [],
                    paging: {}
                },
                hot_records: [],
                loading: true
            };
            return res;
        },
        watch: {
            // 监听路由变动
            '$route': 'fetchData'
        },
        computed: {
            cannotBackward: function () {
                var paging = this.page_data.paging;
                return paging.current_page == 1;
            },
            cannotForword: function () {
                var paging = this.page_data.paging;
                return paging.current_page >= paging.count;
            }
        },
        methods: {
            async fetchData() {
                this.loading = true;
                var data = await fetchRest("category/doctors?disable_hot_records=true&disable_some_model_categorys=true");
                data.page_data.data.forEach(article => {
                    if (article.thumb) {
                        article.thumb_full = config.api_base_url + article.thumb;
                    }
                })
                for (var k in data) {
                    this[k] = data[k];
                }
                this.loading = false;
            },
            pageJump(change_value) {
                if (
                    (change_value < 0 && this.cannotBackward)
                    ||
                    (change_value > 0 && this.canForward)
                ) {
                    var currentRoute = router.currentRoute;
                    var path = currentRoute.path;
                    var query = Object.assign({}, currentRoute.query);

                    query.p = this.page_data.paging.current_page + change_value;

                    router.push({ path: path, query: query })
                }
            },
            goback() {
                router.back();
            }
        }
    }
</script>
<style scoped>
    .card-head{
        background-color: rgb(77, 182, 172);
        /*height: 86px;*/
        height: 40px;
        overflow: hidden;
        color:#FFF;
        text-align:left;
        padding: 0 16px;
        display: flex;
        /*justify-content:space-between;*/
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
        box-shadow: 0 1px 4px #333;
    }
    .card-head h2{
        margin-top: 10px;
        display: inline-block;
        flex: 1 0 auto;
        font-size:1.3em;
    }
    .card-head .icon-back{
        padding-right: 1em;
        border-right: 1px solid #eee;
        margin-right: 1em;
    }
    .placeholder-mide{
        width: 100%;
    }
    .page-turn{
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 45px;
        display: inline-block;
        flex: 1 0 auto;
        font-size: 1.4em;
        color: #EEE;
    }
    .page-turn .iconfont.icon-turnpage{
        font-size: 1em;
        color: #EEE;
    }
    .page-turn .iconfont{
        font-size: 1.4em;
        font-weight: lighter;
        color: #FFF;
        text-shadow: 0 0 2px #333;
    }
    .page-turn .iconfont.disabled{
        color: #CCC;
        text-shadow:none;
    }

    .card-list{
        margin-top: 50px;
        margin-bottom: 70px;
    }
    .card-list .card:first-child{
        margin-top:12px;
    }
    .card{
        display: block;
        margin: 0 12px 12px 12px;
        box-sizing: border-box;
        box-shadow: 0px 1px 2px #666;
        border-radius: 2px;
        text-decoration: none;
        color: #333;
    }
    .card .card-image{
        width: 100%;
        min-height: 52px;
        max-height: 280px;
        overflow: hidden;
        position: relative;
        /*margin: -18px;*/
        background-size:100%;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .card .card-image img{
        width: 100%;
        opacity: 0;
    }
    .card .card-image .img-mask{
        width: 100%;
        height: 100%;
        background-color: rgba(51, 51, 51, 0.3);
        background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50% rgba(255,255,255,0.1) 62% rgba(255,255,255,0.5) 85%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.1) 62%,rgba(255,255,255,0.5) 85%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.1) 62%,rgba(255,255,255,0.5) 85%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

        position: absolute;
        top: 0;
        left: 0;
    }
    .card .card-image h4{
        margin: 0;
        position: absolute;
        top: 30px;
        left: 20px;
        font-size: 15px;
        color: #FFF;
    }
    .card .card-image .card-content{
        padding: 20px;
        font-size: 12px;
        text-align: left;
        margin: 0;
        position: absolute;
        top: 105px;
        color: #333;
        text-shadow: 0 0 2px #FFF;
    }
    .card.black{
        background-color: #333;
    }
    .card .card-more{
        background-color:  rgb(77, 182, 172);
        color:#FFF;
        font-weight: bold;
        padding: 8px;
        font-size: 1.2em;
    }
    .card .card-more .iconfont{
        font-size: 1.2em;
    }
    .card .card-info{
        color: #666;
        font-weight: bold;
        padding: 8px;
        font-size: 1.2em;
    }
    .rate-start{
        height: 30px;
        background-position-y: 30px;
    }
</style>